<template>
  <div id="app">
    <input type="file" @change="handleFileChange">
    <br>
    <br>
    <input type="file" @change="handleFileChange2">
    <br>
    <br>
    <img :src="imgUrl" alt="">
  </div>
</template>

<script>
import axios from 'axios'
import * as qiniu from 'qiniu-js'
// import { Base64 } from 'js-base64'
const crypto = require('crypto')
export default {
  name: 'App',
  data () {
    return {
      imgUrl: ''
    }
  },
  methods: {
    handleFileChange (e) {
      axios.get('/api/getToken').then(res => {
        console.log('token', res)
        const token = res.data
        // console.log(e.target.files)
        const file = e.target.files[0]
        const putExtra = {
          fname: file.name
        }
        const observable = qiniu.upload(file, 'image/' + file.name, token, putExtra, {})
        const next = res => {
          // 上传进度
          console.log('progress', res)
        }
        const error = err => {
          console.log('error', err)
        }
        const complete = res => {
          console.log('complete', res)
          const key = res.key
          // this.getImgUrl(key)
          this.getImgUrlByServer(key)
        }
        observable.subscribe(next, error, complete) // 这样传参形式也可以
        // const subscription = observable.subscribe(next, error, complete)
        // subscription.unsubscribe() // 上传取消
      })
    },
    initToken () {
      const policy = {
        scope: 'chashao-test',
        deadline: parseInt(Date.now() / 1000) + 3600,
        returnBody: `{
          "name": $(fname),
          "key": $(key),
          "hash": $(etag)
        }`
      }
      const putPolicy = JSON.stringify(policy)
      // const encodedPutPolicy = Base64.encode(putPolicy)
      const encodedPutPolicy = Buffer.from(putPolicy).toString('base64').replace(/\//g, '_').replace(/\+/g, '-')
      const hmac = crypto.createHmac('sha1', 'LtT5Y_VDhyopOUZuAlc-t8M5ng7Fy-9nC2pu122s')
      hmac.update(encodedPutPolicy)
      const sign = hmac.digest('base64')
      const encodedSign = sign.replace(/\//g, '_').replace(/\+/g, '-')
      const uploadToken = 'ykab9vqy6Tm7pFk8FSJP1Mf29wOmKFs0h2cP-Xx5' + ':' + encodedSign + ':' + encodedPutPolicy
      console.log(uploadToken)
      return uploadToken
    },
    handleFileChange2 (e) {
      const file = e.target.files[0]
      const putExtra = {
        fname: file.name
      }
      const token = this.initToken()
      const observable = qiniu.upload(file, file.name, token, putExtra, {})
      const next = res => {
        // 上传进度
        console.log('progress', res)
      }
      const error = err => {
        console.log('error', err)
      }
      const complete = res => {
        console.log('complete', res)
        const key = res.key
        this.getImgUrl(key)
        // this.getImgUrlByServer(key)
      }
      observable.subscribe(next, error, complete) // 这样传参形式也可以
    },
    getImgUrl (key) {
      console.log(key)
      const e = parseInt(Date.now() / 1000) + 3600 // 过期时间
      // key = Buffer.from(key).toString('base64').replace(/\//g, '_').replace(/\+/g, '-')
      const downloadUrl = `http://qyfpr5vha.bkt.clouddn.com/${key}?e=${e}`
      const hmac = crypto.createHmac('sha1', 'LtT5Y_VDhyopOUZuAlc-t8M5ng7Fy-9nC2pu122s')
      hmac.update(downloadUrl)
      const sign = hmac.digest('base64')
      const encodedSign = sign.replace(/\//g, '_').replace(/\+/g, '-')
      const token = 'ykab9vqy6Tm7pFk8FSJP1Mf29wOmKFs0h2cP-Xx5' + ':' + encodedSign
      const realDownloadUrl = `${downloadUrl}&token=${token}`
      this.imgUrl = realDownloadUrl
    },
    getImgUrlByServer (key) {
      const params = {
        key
      }
      axios.get('/api/imgUrl', { params }).then(res => {
        this.imgUrl = res.data
      })
    }
  },
  created () {
    // this.initToken()
    // this.getImgUrl('1.jpg')
    // this.getImgUrlByServer()
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
img {
  width: 200px;
  height: 200px;
  object-fit: contain;
}
</style>